<div class="form-group">
    <label id='title' class="col-md-3 control-label">{{ field.verbose_name }}</label>

    <div class="col-md-9">
        <div class="input-group col-md-12">
            <input id="tree_input_{{ field.name }}_{{ is_search }}" class="form-control" type="text" placeholder="" readonly>
            <span class="input-group-btn">
                <button id="delete_{{ field.name }}_{{ is_search }}" class="btn default date-reset" type="button"><i class="fa fa-times"></i></button>
            </span>
            <input id="tree_input_hidden_{{ field.name }}_{{ is_search }}" type="hidden" name="{{ field.name }}"/>
        </div>
    </div>
    <div id="tree_{{ field.name }}_{{ is_search }}"
         style="left:234px;display:none;position:absolute;border:1px solid grey;height:200px;width:500px;overflow:auto;background-color:white">
        <div id="tree_content_{{ field.name }}_{{ is_search }}" class="tree-demo"></div>
    </div>
</div>
<script type="text/javascript">
    $("#delete_{{ field.name }}_{{ is_search }}").click(function (event) {
        $("#tree_content_{{ field.name }}_{{ is_search }}").jstree("deselect_all")
        $("#tree_input_{{ field.name }}_{{ is_search }}").val("")
        $("#tree_input_hidden_{{ field.name }}_{{ is_search }}").val("")
    })

        $("#tree_content_{{ field.name }}_{{ is_search }}").jstree({
            "core" : {
                "themes" : {
                    "responsive": false
                },
                // so that create works
                "check_callback" : true,
                'data' :
                {% if field.is_ajax %}
                    {
                        'url' : function (node) {
                          return '{% url 'ajaxtree' %}'
                        },
                        'data' : function (node) {
                              return {
                                  'model' : '{{ field.model.school_get_model_full_name }}',
                                  'field' : '{{ field.name }}',
                                  'parent' : node.id,
                                  'level' : node.parents.length
                              };
                        }
                    }
                {% else %}

                {% endif %}
            },
            "types": {
                "default": {
                    "icon": "fa fa-folder icon-state-warning icon-lg"
                },
                "file": {
                    "icon": "fa fa-file icon-state-warning icon-lg"
                }
            },
            "state": {"key": "demo2"},
            "plugins": ["contextmenu", "dnd", "state", "types"]
    }).on('select_node.jstree', function (e, data) {
        $("#tree_input_{{ field.name }}_{{ is_search }}").val(data.node.text)
        $("#tree_input_hidden_{{ field.name }}_{{ is_search }}").val(data.node.id)
        $('#tree_{{ field.name }}_{{ is_search }}').hide()
    })

    $("#tree_input_{{ field.name }}_{{ is_search }}").click(function (event) {
        var
                $tree_input = $("#tree_input_{{ field.name }}_{{ is_search }}"),
                $gree_input_offset = $tree_input.offset(),
                $tree = $("#tree_{{ field.name }}_{{ is_search }}"),
                $tree_input_offset = $tree_input.offset(),
                $group = $tree_input.parents('.form-group'),
                $group_offset = $group.offset(),
                tree_left = $tree_input.offset().left - $group_offset.left

        $tree.toggle().css("zIndex", 20000)
        $tree.css({
            left: tree_left + 'px',
            top: $tree_input_offset.top + 5 + 'px',
            width: $tree_input.css('width')
        })
        $("#tree_content_{{ field.name }}_{{ is_search }}").jstree()
        return false
    })
    $("#tree_{{ field.name }}_{{ is_search }}").click(function (event) {
        return false
    })
    $("body").click(function (event) {
        $('#tree_{{ field.name }}_{{ is_search }}').hide()
    })
</script>